<template>
    <div>
        <div class="find_exam_tittle">
            <BreadCrumb></BreadCrumb>
        </div>
        <div class="examFind_tittle">
            入学考试成绩查询
        </div>

        <div class="form_wrap">
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-input v-model="stu_id" placeholder="请输入学号"></el-input>
                </el-col>
                <el-col :span="4" :offset="1">
                    <el-button @click="getExam">点击查询</el-button>
                </el-col>
            </el-row>
        </div>

        <div v-if="show" class="table_wrap">
            <el-table :data="examInfo" style="width: 100%" height="110px">
                <el-table-column prop="stu_id" label="学号">
                </el-table-column>
                <el-table-column prop="stu_name" label="姓名">
                </el-table-column>
                <el-table-column prop="chinese" label="语文">
                </el-table-column>
                <el-table-column prop="math" label="数学">
                </el-table-column>
                <el-table-column prop="english" label="英语">
                </el-table-column>
                <el-table-column prop="lizong" label="理综">
                </el-table-column>
                <el-table-column prop="wenzong" label="文综">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { req_find_enter } from '@/api/exam.js'
export default {
    data() {
        return {
            stu_id: '',//查询用的学号
            show: false,//设置表格显示状态
            examInfo: []//设置成绩 表格渲染数组的初始状态
        }
    },
    methods: {
        async getExam() {
            // console.log('查询');
            let result = await req_find_enter(this.stu_id);
            // console.log(result);
            //拿到表格渲染的数组
            this.examInfo = result.data;
            this.show = true;
        }
    }
}
</script>

<style lang="scss" scoped>
div {

    .find_exam_tittle,
    .examFind_tittle {
        height: 30px;
    }

    .examFind_tittle {
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 20px;
    }

    .form_wrap {
        height: 50px;
    }

    .table_wrap {
        height: 200px;
    }
}
</style>